<template>
    <div class="dashboard-container">
        <div class="dashboard-text">
            <div>登录成功</div>
            <el-button type="primary" @click="getlogout">退出登录</el-button>

            <el-button type="primary" @click="getlogoff">注销账户</el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="Key" width="150">
                <template slot-scope="scope">
                    {{ scope.row.key }}
                </template>
            </el-table-column>
            <el-table-column label="Value">
                <template slot-scope="scope">
                    <span v-if="scope.row.key === 'avatar'">
                        <img :src="scope.row.value" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%;">
                    </span>
                    <span v-else>
                        {{ scope.row.value }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>

</template>

<script>
import { userInfos, Logoff } from '@/api/user'
import store from '@/store';
export default {
    name: 'Dashboard',
    data() {
        return {
            userInfo: {},
            list: [],
            listLoading: true
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        async getUserInfo() {
            const res = await userInfos();
            if (res.code == 10000) {
                this.userInfo = res.data;
                this.list = Object.keys(res.data).map(key => ({
                    key: key,
                    value: res.data[key]
                }));
                this.listLoading = false;
            } else {
                this.$message({
                    message: res.message,
                    type: 'error'
                });

            }
        },
        getlogout() {
            store.dispatch('removeToken')
            this.$router.push({ path: '/login' });
        },
        async getlogoff() {
            const res = await Logoff();
            console.log(res);
            console.log(111111111)
            if (res.code == 10000) {
                this.$message({
                    message: '注销成功',
                    type: 'success'
                });
                this.$router.push({ path: '/login' });
            }else{
                this.$message({
                message: res.message || '注销失败',
                type: 'error'
            });
            }

        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}

.dashboard-text {
    display: flex;
    justify-content: center;
    align-items: center;

}

.el-button {
    margin: 0 20px;
}
</style>